<template>
  <section v-loading.fullscreen.lock="loading">
    <el-card class="margin-top">
      <div slot="header" class="clearfix relative">
        <el-row>
          <el-col
            :sm="24"
            :md="24"
            :lg="8"
            :xl="8"
            class="flex  align-center justify-start"
          >
            <span class="title-icon margin-right">库存情况</span>
          </el-col>
          <el-col :sm="24" :md="24" :lg="8" :xl="8" class="flex">
            <div class="margin-lr">
              <span>总产品个数：</span>
              <span>{{ total.num }}</span>
            </div>
            <div class="margin-lr">
              <span>总箱数：</span>
              <span>{{ total.boxNum }}</span>
            </div>
            <div class="margin-lr">
              <span>总重量：</span>
              <span>{{ total.weight }}</span>
            </div>
            <div class="margin-lr">
              <span>总体积：</span>
              <span>{{ total.volume }}</span>
            </div>
          </el-col>
          <el-col
            :sm="23"
            :md="23"
            :lg="7"
            :xl="7"
            class="flex  align-center justify-end"
          >
            <!-- verifyShow.returnInfoEdit -->
            <el-button
              v-if="isEdit"
              type="success"
              size="mini"
              @click="importInStockInfo"
            >
              导出库存
            </el-button>
          </el-col>
          <el-col
            :sm="1"
            :md="1"
            :lg="1"
            :xl="1"
            class="text-right flex align-center"
            style="justify-content: flex-end;"
          >
            <i
              :class="{
                'el-icon-arrow-down': show,
                'el-icon-arrow-up': !show
              }"
              class="text-lg pointer margin-left"
              @click="show = !show"
            />
          </el-col>
        </el-row>
      </div>

      <div v-show="show">
        <hot-table ref="hotTable" :settings="hotSettings" :data="inStockInfo" />
      </div>
    </el-card>
  </section>
</template>

<script>
import { HotTable } from '@handsontable/vue'
// import Handsontable from 'handsontable'
import { exportStockGoods } from '@/api/abroadWaybill'
import 'handsontable/languages/zh-CN'
import globalData from '@/utils/config'
export default {
  name: 'InStockInfo',
  components: {
    HotTable
  },
  props: {
    inStockInfo: {
      type: Array,
      default: function() {
        return []
      }
    },

    actionUrl: {
      type: String,
      default: ''
    },
    waybillId: {
      type: [String, Number],
      default: 1
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      show: false,
      loading: false,
      autoHeight: 'auto',
      uploadDialog: false,
      fbaCodeList: []
    }
  },
  computed: {
    total() {
      let num = 0
      let boxNum = 0
      let weight = 0
      let volume = 0
      for (const i of this.inStockInfo) {
        num += Number(i.num)
        boxNum += Number(i.boxNum)
        weight += Number(i.weight)
        let v = 0
        if (i.boxSpecifications && i.boxSpecifications.indexOf('*') > -1) {
          const list = i.boxSpecifications.split('*')

          if (list.length === 3) {
            const arr = []
            for (const j of list) {
              let n = j
              if (isNaN(Number(n))) {
                n = 0
              }
              arr.push(n)
            }
            v =
              (Number(arr[0]) * 100 * Number(arr[1]) * 100 * Number(arr[2])) /
              10000
          }
        }

        volume += v
      }
      volume = volume / 1000000
      return { num, boxNum, weight, volume }
    },
    hotSettings() {
      return {
        rowHeaders: true, // 行表头
        stretchH: 'all', // 所有列宽小于表宽时,填充满整个表 all（所有列填充）/last（最后一列）/none(不填充)
        licenseKey: globalData.licensekey,
        // 定义表结构
        colHeaders: [
          '退货编号',
          '旧FNSKU',
          '新FNSKU',
          '产品个数',
          '卡板数',
          '箱数',
          '箱规（CM）',
          '总重量（KG）',
          '签收日期'
        ],
        width: '100%',
        height: 'auto',

        columns: [
          {
            data: 'waybillNo',
            width: 100,
            type: 'text'
          },
          {
            data: 'oldSku', //
            type: 'text',
            readOnly: true
          },
          {
            data: 'sku',
            readOnly: true,
            type: 'text'
          },
          {
            data: 'num',
            readOnly: true,
            type: 'numeric',
            numericFormat: {
              pattern: '0'
            }
          },
          {
            data: 'receiptPallets',
            readOnly: true,
            type: 'numeric',
            numericFormat: {
              pattern: '0'
            }
          },
          {
            data: 'boxNum',
            readOnly: true,
            type: 'numeric',
            numericFormat: {
              pattern: '0'
            }
          },
          {
            data: 'boxSpecifications',
            readOnly: true,
            type: 'text'
          },
          {
            data: 'weight',
            readOnly: true,
            type: 'text'
          },
          {
            data: 'signTime',
            readOnly: true,
            type: 'text'
          }
        ],
        language: 'zh-CN'
      }
    }
  },

  mounted() {
    // this.init();
    // console.log("this.shippingfbastockMap :>> ", this.shippingfbastockMap);
  },
  methods: {
    async importInStockInfo() {
      const data = await exportStockGoods({ waybillId: this.waybillId })
      if (data) {
        this.$message({
          message:
            '已为您打开文件下载页面，如果页面未跳转，请检查弹出窗口是否被浏览器拦截',
          type: 'success',
          duration: 5000,
          showClose: true
        })
        window.open(globalData.fileUrl + data)
      } else {
        this.$message.error('暂无数据')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.relative {
  .absolute {
    right: 10px;
    top: -40%;
  }
}
</style>
<style scoped>
/deep/ .el-card__header {
  padding: 8px 20px;
}
</style>
